<template>
  <view class="remarks_content" :style="{'padding-bottom': $getBottomHight() + 20 + 'rpx'}">
    <view class="title flex-c">{{ title }}</view>

    <scroll-view scroll-y class="scroll">
      <uv-radio-group
        v-model="radioValue"
        placement="column"
        labelColor="#1C2023"
        labelSize="28rpx"
        activeColor="#ff9900"
        iconPlacement="right">
        <view class="remarks_item">
          <uv-radio v-for="item in list" :key="item.id" :custom-style="{padding: '25rpx 30rpx', borderBottom: '2rpx solid #E4E4E4'}" :name="item.id" :label="item.title"></uv-radio>
        </view>
      </uv-radio-group>
    </scroll-view>

    <view class="pop_bottom">
      <view @click="setConfirm" class="mainBtn confirms">确认</view>
    </view>
  </view>
</template>


<script>
	export default { 
		props: {
			title: {
			  type: String,
			  required: true
			},
			list: {
			  type: Array,
			  required: true
			}
		}, 
		data() {
			return {
				radioValue: null
			}
		},
		
		methods: {
			setConfirm() {
				if (!this.radioValue) {
					this.$showToast('请选择备注')
				    return false
				}
				
				const item = this.list.find(item => item.id === this.radioValue)
				this.$emit('remarksConfirm', item)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/static/css/base.scss');
  .remarks_content {
    .remarks_item {
      padding: 0 30rpx;
    }
    .scroll {
      height: 30vh;
    }
    .title {
      height: 100rpx;
      font-size: 32rpx;
      color: #1C2023;
      border-bottom: 2rpx solid #E4E4E4;
    }
    .pop_bottom {
      padding: 0 50rpx;
      margin-top: 20rpx;
    }
  }
</style>
